<template>
   <div>
 <!-- 
               el-menu
                default-active	当前激活菜单的 index	string
                background-color background-color	菜单的背景色（仅支持 hex 格式）	string
                 text-color	菜单的文字颜色（仅支持 hex 格式）	string
                 active-text-color	当前激活菜单的文字颜色（仅支持 hex 格式）	string
                 unique-opened	是否只保持一个子菜单的展开	boolean
                 router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean
             -->
          <el-menu
            :default-active="defaultActive"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened
            router
          >
            <el-menu-item index="/">
              <i class="el-icon-s-grid"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <!-- 循环顶级菜单数据 -->
            <el-submenu :index="item.title"  v-for="item in navlist" :key="item.id">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.title}}</span>
              </template>
              <!-- 循环子集菜单数据 -->
              <el-menu-item v-for="itemc in item.children" :index="itemc.url" :key="itemc.id" >
                <span slot="title">{{itemc.title}}</span>
              </el-menu-item>
            </el-submenu>
           
          </el-menu>
    </div>
   
</template>

<script>
// import {getMenu} from "../util/axios"
export default {
  data(){
    return{
       defaultActive:"/",
       navlist:[],
    }
  },
  mounted(){
       this.defaultActive =  this.$route.meta.selected;
       
      this.navlist = this.$store.state.userInfo?this.$store.state.userInfo.menus:[];

  },
   watch:{
       $route(newVal){
          this.defaultActive = newVal.meta.selected;
       }
   }
};
</script>

<style scoped>
</style>